<template>
  <div class="nav_outer">
    <header id="header" class="yui-bar">
      <div>个人中心</div>
    </header>
    <div class="content">
      <div class="uinfo">
        <div class="uinfo_ava">
          <img :src="user.actor | imgpre" alt="" v-if="user.actor">
          <img :src="defaultava" v-else />
        </div>
        <!-- <div class="uinfo_logbtn" @click="navito('login')">点击登录</div> -->
        <div class="uinfo_name">
          {{user.name || ''}}
        </div>
        <div class="veri" v-if="user.name && user.cardPicBack && user.cardPicFront">
          <span class="veriicon">v</span> 已实名
        </div>
        <div class="veri" v-else>
         <span>未认证</span>
        </div>
      </div>
      <div class="pagetabs" v-if="user.name && user.cardPicBack && user.cardPicFront">
        <a class="tab" @click="navito('wallet')">
          <p class="num">￥{{parseFloat(money).toFixed(2)}}</p>
          <p>钱包</p>
        </a>
        <a class="tab" @click="navito('myorder')">
          <p class="num">{{yuyue}}</p>
          <p>预约</p>
        </a>
        <a class="tab" @click="navito('collect')">
          <p class="num">{{collect}}</p>
          <p>收藏</p>
        </a>
      </div>
      <div class="pagetabs" v-else>
        <a class="tab" @click="navito('wallet')">
          <img src="../assets/img/qianbao@2x.png" alt />
          <p>钱包</p>
        </a>
        <a class="tab" @click="navito('myorder')">
          <img src="../assets/img/yuyue@2x.png" alt />
          <p>预约</p>
        </a>
        <a class="tab" @click="navito('collect')">
          <img src="../assets/img/favourite@2x.png" alt />
          <p>收藏</p>
        </a>
      </div>
      <div class="jianlitab">
        <div class="jianli" @click="navito('resume')">
          <div class="flex_bet">
            <div class="jian_left">
              <p class="stars">
                <span>简历完整度</span>
                <img src="../assets/img/shoucang-3@2x.png" alt  v-for="index of stars" :key="index"/><img src="../assets/img/shoucang-2@2x.png" alt  v-for="index of (5-stars)" :key="'em'+index"/>
                
              </p>
              <p>
                <span>{{ stars==5?'修改简历':'完善简历' }}</span>
                <img src="../assets/img/bianji@2x.png" alt class="edit" />
              </p>
            </div>
            <div class="jian_right" v-if="stars==5">
              <img src="../assets/img/jobicon.png" alt style="width:1.3rem;"/>
            </div>
            <div class="jian_right" v-else>
              <img src="../assets/img/liwu@2x.png" alt />
              <p>完善简历得好礼</p>
            </div>
          </div>
        </div>
        <div class="pagetabs">
          <!-- <a class="tab" @click="navito('mytask')">
            <img src="../assets/img/yaoqingjilu@2x2.png" alt />
            <p>我的任务</p>
          </a> -->
          <a class="tab" @click="navito('recoreward')">
            <img src="../assets/img/tuijian@2x.png" alt />
            <p>推荐有奖</p>
          </a>
          <a class="tab" @click="toconsult">
            <img src="../assets/img/guwen-2@2x.png" alt />
            <p>就业顾问</p>
          </a>
          <a class="tab" @click="navito('advise')">
            <img src="../assets/img/yaoqingjilu@2x2.png" alt />
            <p>意见反馈</p>
          </a>
          <a class="tab" @click="navito('aboutus')">
            <img src="../assets/img/guanyuwomen@2x.png" alt />
            <p>关于我们</p>
          </a>
          <a class="tab" @click="navito('setting')" v-if="!isInmini">
            <img src="../assets/img/gerenshezhi@2x.png" alt />
            <p>设置</p>
          </a>
        </div>
      </div>
    </div>
    <div class="palceholder"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      consult: {},
      defaultava: require('../assets/img/ava1.png'),
      stars: 1,
      money: 0,
      yuyue: 0,
      collect: 0,
      isInmini: !!this.Http.getUrlParam('isSP')
    };
  },
  computed: {
    ...mapState({
      user: function(){return this.$store.state.user}
    })
  },
  created() {
    this.loadConsult();
    this.loadStars();
    if(this.user.name && this.user.cardPicBack && this.user.cardPicFront){
      this.loadAccount();
      this.loadYuy();
      this.loadCollect();
    }
  },
  methods: {
    toconsult() {
      if (!this.consult.name) {
        this.mui.toast("暂无就业顾问");
      } else {
        this.$router.push("consultant");
      }
    },
    navito(url) {
      this.$router.push({ path: url });
    },
    loadConsult() {
      this.Http.get("/yzj/personal/app/tracker", null).then(res => {
        this.consult = res || {};
      });
    },
    loadStars(){
      this.Http.get("/yzj/personal/resume/star", null).then(res => {
        this.stars = res.result;
      });
    },
    loadAccount(){
      this.Http2.get(`/mobile/myaccount/myAccount/${this.user.id}`, null).then(
        res => {
            this.money = res.money || 0;
        },
        err => {
          if(err.response.data.code==1){//code为1，给他创建个账户
            this.createAccount();
          }
        }
      );
    },
    createAccount(){
      this.Http2.jsonpost(`/mobile/myaccount/save`, JSON.stringify({
        type: 2,
        userId: this.$store.state.user.id
      })).then(
        res => {
        }
      );
    },
    loadYuy(){
      this.Http.get("/yzj/intention_factories", {
        current: 1,
        size: 1
      }).then(
        res => {
          this.yuyue = res.totalCount;
        }
      );
    },
    loadCollect(){
      this.Http2.get("/mobile/usercollection/page", {
        current: 1,
        size: 1,
        type: 0,
        userId: localStorage.getItem("uid")
      }).then(
        res => {
          this.collect = res.totalCount;
        }
      );
    }
  },
  components: {}
};
</script>

<style scoped lang='scss'>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
#header {
  background: #4c7fe9;
  color: #fff;
}
.uinfo {
  height: px2em(320);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #efefef;
  position: relative;
  background-image: url(../assets/img/pcebanner.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.veri {
  position: absolute;
  right: px2em(100);
  top: px2em(24);
  font-size: 0.8em;
  color: #333;
}
.uinfo_ava {
  width: px2em(140);
  height: px2em(140);
  border-radius: 50%;
  overflow: hidden;
  background-color: #ccc;
  > img {
    width: 100%;
  }
}
.uinfo_logbtn {
  background: #fff;
  height: px2em(60);
  line-height: px2em(60);
  border-radius: px2em(30);
  margin-top: px2em(50);
  padding: 0 0.6em;
}
.uinfo_name {
  color: #fff;
  font-size: 1.2em;
  margin-top: px2em(50);
}
.pagetabs {
  overflow: hidden;
  background: #fff;
  .tab {
    float: left;
    width: 33.333333%;
    text-align: center;
    padding: px2em(34);
    > img {
      height: px2em(50);
    }
    > p {
      margin-top: px2em(20);
      margin-bottom: 0;
      color: #333;
    }
    .num{
      color: #468CE3;
    }
  }
}
.veriicon {
  display: inline-block;
  width: 9px;
  height: 9px;
  text-align: center;
  line-height: 9px;
  border-radius: 50%;
  color: #fff;
  background: #ffbc06;
  vertical-align: middle;
  font-size: 10px;
}
.jianlitab {
  padding: px2em(20) px2em(30);
  background-color: #efefef;
  .edit {
    width: px2em(30);
    vertical-align: middle;
  }
  .jianli {
    background: #4c83ed;
    border-radius: 5px;
    padding: 0 px2em(60);
    & p {
      color: #fff;
    }
  }
  .stars > img {
    width: px2em(26);
  }
  .jian_left {
    padding: px2em(30) 0;
    & > p:last-child {
      margin-top: px2em(70);
      margin-bottom: 0;
    }
    .mui-icon-star {
      font-size: 0.9em;
    }
  }
  .jian_right {
    text-align: center;
    > img {
      width: px2em(70);
    }
    > p {
      margin-bottom: 0;
      position: relative;
      top: px2em(20);
    }
  }
  .pagetabs {
    margin: px2em(20) 0;
  }
}
</style>
